<div [ngClass]="'p-tabview'" [ngStyle]="style" [class]="styleClass">
    <div #navbar class="p-tabview-nav">
        <div class="p-tabview-nav-group">
            <ul class="p-tabview-nav-home">
                <li *ngIf="tabHome" [ngClass]="{'p-disabled': tabHome.disabled, 'p-tabhome': true}" [ngStyle]="tabHome.headerStyle" [class]="tabHome.headerStyleClass">
                    <a class="p-tabview-nav-link" [ngClass]="{'p-highlight': tabHome.selected}" [attr.id]="tabHome.id + '-label'" (click)="open($event,tabHome)" (keydown.enter)="open($event,tabHome)">
                        <ng-container *ngIf="isString(tabHome.header); else headerTmpl">
                            <svg class="icon p-tabview-icon"><use xlink:href="#icon-home"></use></svg>
                            <span class="p-tabview-header">{{tabHome.header}}</span>
                        </ng-container>
                        <ng-template #headerTmpl>
                            <ng-container *ngTemplateOutlet="tabHome.header"> </ng-container>
                        </ng-template>
                    </a>
                </li>
            </ul>
            <ul class="p-tabview-nav-tablist" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dragDrop($event)">
                <ng-template ngFor let-tab [ngForOf]="tabs">
                    <li [ngClass]="{'p-disabled': tab.disabled}" [ngStyle]="tab.headerStyle" [class]="tab.headerStyleClass" *ngIf="!tab.closed && !tab.isHome" (contextmenu)="onTabContextMenu($event, tab)">
                        <a cdkDrag cdkDragLockAxis="x" class="p-tabview-nav-link" [ngClass]="{'p-highlight': tab.selected}" [attr.id]="tab.id + '-label'" (click)="open($event,tab)" (keydown.enter)="open($event,tab)">
                            <ng-container *ngIf="isString(tab.header); else headerTmpl">
                                <svg class="icon p-tabview-icon"><use xlink:href="#icon-sftp"></use></svg>
                                <span class="p-tabview-header">{{tab.header}}</span>
                            </ng-container>
                            <ng-template #headerTmpl>
                                <ng-container *ngTemplateOutlet="tab.header"> </ng-container>
                            </ng-template>
                            <span *ngIf="tab.closable" class="p-tabview-close iconfont icon-win-close" (click)="close($event,tab)"></span>
                        </a>
                    </li>
                </ng-template>
            </ul>
            <ul class="p-tabview-nav-add">
                <li *ngIf="showAdd"><a (click)="addTab($event)" class="p-tabview-nav-link"><i class="p-tabview-add iconfont icon-add"></i></a></li>
            </ul>
        </div>
        <div class="p-tabview-nav-blank"></div>
        <div class="p-tabview-nav-extra extra">
            <ng-container *ngIf="extraContent">
                <ng-container *ngTemplateOutlet="extraContent"></ng-container>
            </ng-container>
        </div>
    </div>
    <div class="p-tabview-panels">
        <ng-content></ng-content>
    </div>
</div>